<template>
    <div>
        <div id="my-chart"></div>
    </div>
</template>

<script>
    export default {
        name: 'index',
        props: ['echartData', 'type', 'titleText'],
        data () {
            return {
                // 图表数据
                myEchartData: [],
                // x轴数据
                xAxisData: [],
                // y轴数据
                yAxisData: [],
                // 图例数据
                legendData: [],
                // 图表标题
                echartTitle: ''
            }
        },
        watch: {
            echartData (val) {
                this.myEchartData = val
                this.getData()
            }
        },
        mounted () {
            switch (this.titleText) {
            case 'overview':
                this.echartTitle = '质控缺陷项趋势分析图'
                document.getElementById('my-chart').style.height = '430px'
                break
            case 'score':
                this.echartTitle = '质控得分/扣分趋势分析图'
                document.getElementById('my-chart').style.height = '475px'
                break
            case 'coding':
                this.echartTitle = '编码缺陷分析图'
                document.getElementById('my-chart').style.height = '475px'
                break
            case 'notCodng':
                this.echartTitle = '非编码缺陷分析图'
                document.getElementById('my-chart').style.height = '542px'
                break
            }
            this.myEchartData = this.echartData
            this.getData()
            window.onresize = () => {
                this.resizeEchart()
            }
        },
        methods: {
            /**
             * 图表宽度自适应
             */
            resizeEchart () {
                this.$echarts.init(document.getElementById('my-chart')).resize()
            },
            /**
             * 处理页面数据
             */
            getData () {
                this.legendData = []
                this.yAxisData = []
                this.myEchartData.forEach(item => {
                    this.xAxisData = item.xIndex
                    this.yAxisData.push({
                        name: item.name,
                        data: item.data,
                        type: this.type
                    })
                    this.legendData.push(item.name)
                })
                this.initEchart()
            },
            /**
             * 初始化echart
             */
            initEchart () {
                let myChart = this.$echarts.init(document.getElementById('my-chart'))
                myChart.setOption({
                    // title: {
                    //     text: this.echartTitle,
                    //     x: 'center',
                    //     y: 'bottom',
                    //     textStyle: {
                    //         fontSize: 16,
                    //         fontWeight: 'bolder',
                    //         color: '#333'
                    //     }
                    // },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: this.legendData
                        // x: 'center',
                        // y: 'bottom',
                        // padding: [0, 0, 38, 0]
                    },
                    // grid: {
                    //     top: '4%',
                    //     bottom: '25%'
                    // },
                    xAxis: {
                        data: this.xAxisData,
                        axisLabel: {
                            rotate: 30,
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        offset: 5
                    },
                    yAxis: {},
                    series: this.yAxisData,
                    color: ['#f2ab66', '#f26666', '#66a0f2', '#37a2da', '#67e0e3', '#32c5e9', '#9fe6b8', '#efdb5c', '#ff9f7f', '#fb7293', '#e062ae', '#e690d1', '#e7bcf3', '#9d96f5', '#9378ea', '#96bfff']
                })
            }
        },
        beforeDestroy () {
            window.onresize = null
        }
    }
</script>

<style scoped lang="scss">
    #my-chart {
        height: 430px;
    }
</style>
